<template>
	<view class="page">
		<view class="content flex column  box-sizing padding-30">
			<view class="flex column fontSize-26" style="line-height: 50rpx;">
				<view v-for="pageNumber in generatePageNumbers()" :key="pageNumber" @click="toPage(pageNumber)">
					<view class="wrapItem flex items-center space-between">
						<view class="flex-center">
							第{{pageNumber}}页
						</view>

						<view class="color-6d6d6d" v-if="pageNumber == page">
							共{{newWordList.last_page_num}}词
						</view>
						<view class="color-6d6d6d" v-else>
							共80词
						</view>

					</view>
				</view>


			</view>


		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const getKnowWordsTotalApi = inject('getKnowWordsTotal');
	const searchVal = ref('')
	const newWordList = ref({})
	const page = ref(1)

	const newwordsList = () => {
		getKnowWordsTotalApi().then(res => {
			newWordList.value = res
			page.value = newWordList.value['max_page']
		})
	}
	const generatePageNumbers = () => {
		const numbers = [];
		for (let i = 1; i <= page.value; i++) {
			numbers.push(i);
		}
		return numbers;
	}
	const clear = () => {
		searchVal.value = '';
		newWordList.value = [];
		newwordsList();
	}
	const search = () => {
		// if(!searchVal.value) return
		newwordsList();
	}
	const toPage = (page) => {
		// console.log(page)
		uni.navigateTo({
			url: '/pages/index/wordBankArea?page=' + page
		})
	}

	onLoad(() => {
		newwordsList()
	})
</script>

<style lang="scss">
	.btns {
		padding-bottom: calc(50rpx);
	}

	.wrapItem {
		// margin-bottom: 20px; 
		padding: 10rpx;
		box-sizing: border-box;
		// width: calc(50% - 10px);
		border-radius: 3px;
		border-bottom: 1px solid #d2d2d2;
	}

	.defaultBorder {
		border: 1px solid #fff;
	}

	.activeBorder {
		border: 1px solid #52c9ff;
	}

	.positon-section {
		position: absolute;
		top: 3%;
		right: 8%;
	}

	::v-deep .u-button--plain.data-v-5ce41ee6 {
		border: 1px solid #b9b9b9;
	}
</style>